import React, { useState } from 'react';
import './Modal.css';

const CreateProjectGroupModal = ({ isOpen, onClose, onSubmit }) => {
  const [projectGroup, setProjectGroup] = useState({
    name: '',
    description: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setProjectGroup(prev => ({
      ...prev,
      [name]: value
    }));
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(projectGroup);
    // 重置表单
    setProjectGroup({ name: '', description: '' });
  };

  if (!isOpen) return null;

  return (
    <div className="modal-overlay">
      <div className="modal-container">
        <div className="modal-header">
          <h2>创建项目组</h2>
          <button className="close-button" onClick={onClose}>×</button>
        </div>
        <form onSubmit={handleSubmit}>
          <div className="modal-body">
            <div className="form-group">
              <label htmlFor="name">项目组名称</label>
              <input
                type="text"
                id="name"
                name="name"
                value={projectGroup.name}
                onChange={handleChange}
                required
                placeholder="请输入项目组名称"
              />
            </div>
            <div className="form-group">
              <label htmlFor="description">项目组描述</label>
              <textarea
                id="description"
                name="description"
                value={projectGroup.description}
                onChange={handleChange}
                placeholder="请输入项目组描述"
                rows="4"
              />
            </div>
          </div>
          <div className="modal-footer">
            <button type="button" className="btn-cancel" onClick={onClose}>取消</button>
            <button type="submit" className="btn-submit">确认</button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default CreateProjectGroupModal;
